<ng-template #titleTemplate>
  <ng-template [ngTemplateOutlet]="apesTitle"></ng-template>
</ng-template>
<ng-template #extraTemplate>
  <ng-template [ngTemplateOutlet]="apesExtra"></ng-template>
</ng-template>
<div class="{{prefixCls}}-head" *ngIf="apesTitle||apesExtra||tab">
  <div class="{{prefixCls}}-head-wrapper">
    <div class="{{prefixCls}}-head-title" *ngIf="apesTitle">
      <ng-container *ngIf="isTitleString; else titleTemplate">{{ apesTitle }}</ng-container>
    </div>
    <div class="{{prefixCls}}-extra" *ngIf="apesExtra">
      <ng-container *ngIf="isExtraString; else extraTemplate">{{ apesExtra }}</ng-container>
    </div>
  </div>
  <ng-container *ngIf="tab">
    <ng-template [ngTemplateOutlet]="tab.template"></ng-template>
  </ng-container>
</div>
<div class="{{prefixCls}}-cover" *ngIf="apesCover">
  <ng-template [ngTemplateOutlet]="apesCover"></ng-template>
</div>
<div class="{{prefixCls}}-body" [ngStyle]="apesBodyStyle">
  <ng-container *ngIf="!apesLoading">
    <ng-content></ng-content>
  </ng-container>
  <apes-card-loading *ngIf="apesLoading"></apes-card-loading>
</div>
<ul class="{{prefixCls}}-actions" *ngIf="apesActions.length">
  <li *ngFor="let action of apesActions" [style.width.%]="100/apesActions.length">
    <span><ng-template [ngTemplateOutlet]="action"></ng-template></span>
  </li>
</ul>
